<template>
    <div>
        <BreadCrumb name1="商品管理" name2="商品分类"></BreadCrumb>
        <el-card>
            <el-row>
                <el-col :span="4">
                    <el-button type="primary" @click="AddCateShow">添加分类</el-button>
                </el-col>
            </el-row>
            <table-tree :data="goodsList" :columns="columns" :selection-type="false" :show-index="true" :expand-type="false" style="margin:10px 0;">
                <template slot-scope="scoped" slot="isOK">
                    <i style="color:#90EE90" v-if="scoped.row.cat_deleted == false" class="el-icon-success"></i>
                    <i style="color:#F56C6C" v-else class="el-icon-error"></i>
                </template>
                <template slot-scope="scoped" slot="sort">
                    <el-tag v-if="scoped.row.cat_level == 0" type="success">一级</el-tag>
                    <el-tag v-else-if="scoped.row.cat_level == 1" type="warning">二级</el-tag>
                    <el-tag v-else type="danger">三级</el-tag>
                </template>
                <template slot-scope="scoped" slot="operate">
                    <el-button type="warning" icon="el-icon-edit" size="mini" @click="GetOneInfo(scoped.row)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="DeleteInfo(scoped.row)">删除</el-button>
                </template>
            </table-tree>
            <!-- 编辑的对话框 -->
            <el-dialog title="编辑" :visible.sync="UpdateDialogVisible" width="30%" >
                <el-form ref="UpdateForm" :model="UpdateForm" label-width="80px">
                    <el-form-item label="分类名称">
                        <el-input v-model="UpdateForm.cat_name"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="UpdateDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="UpdateInfo">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 添加分类的对话框 -->
            <el-dialog title="添加角色" :visible.sync="AddDialogVisible" width="30%" >
                <el-form ref="AddForm" :model="AddForm" :rules="AddRules" label-width="80px">
                    <el-form-item label="分类名称" prop="cat_name">
                        <el-input v-model="AddForm.cat_name"></el-input>
                    </el-form-item>
                    <el-form-item label="父级分类">
                        <el-cascader style="width:100%" v-model="SelectedKeys" :options="parentCateOptions" :props="parentCateProps" @change="CateChange"></el-cascader>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="AddDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="AddCateInfo">确 定</el-button>
                </span>
            </el-dialog>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="info.pagenum" :page-sizes="[3, 5, 8, 10]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </el-card>
    </div>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb'
import {Get_GoodsData,Get_OneGoodsData,Update_OneGoodsData,Delete_GoodsData,Add_GoodsData} from '@/api/goods.js';
    export default {
        data(){
            return{
                info:{
                    type:3,
                    pagenum:1,
                    pagesize:5
                },
                goodsList:[],
                total:0,
                columns:[
                    {
                        label:'分类名称',//列标题名称
                        prop:'cat_name'//对应列内容的属性名
                    },
                    {
                        label:'是否有效',//列标题名称
                        prop:'cat_deleted',//对应列内容的属性名
                        type:'template',//列类型，可选值有 'template'(自定义列模板)
                        template:'isOK'//列类型为 'template'(自定义列模板) 时，对应的作用域插槽（它可以获取到 row, rowIndex, column, columnIndex）名称
                    },
                    {
                        label:'排序',//列标题名称
                        prop:'cat_level',//对应列内容的属性名
                        type:'template',//列类型，可选值有 'template'(自定义列模板)
                        template:'sort'//列类型为 'template'(自定义列模板) 时，对应的作用域插槽（它可以获取到 row, rowIndex, column, columnIndex）名称
                    },
                    {
                        label:'操作',//列标题名称
                        type:'template',//列类型，可选值有 'template'(自定义列模板)
                        template:'operate',//列类型为 'template'(自定义列模板) 时，对应的作用域插槽（它可以获取到 row, rowIndex, column, columnIndex）名称
                        width:'200px'//宽度
                    }
                ],
                UpdateDialogVisible:false,//控制编辑的对话框显示隐藏
                UpdateForm:{},//存储获取单个数据时的参数
                id:'',
                name:'',
                AddDialogVisible:false,//控制添加分类的对话框显示隐藏
                SelectedKeys:[],//选中项绑定值
                parentCateOptions:[],//可选项数据源，键名可通过 Props 属性配置
                parentCateProps:{//配置选项
                    value:'cat_id',//指定选项的值为选项对象的某个属性值
                    label:'cat_name',//指定选项标签为选项对象的某个属性值
                    children:'children'//指定选项的子选项为选项对象的某个属性值
                },
                AddRules:{//添加分类名称时的表单验证
                    cat_name:[
                        { required: true, message: '请输入分类名称', trigger: 'blur' },
                        { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
                    ]
                },
                AddForm:{//添加分类时 需要的参数
                    cat_name:'',
                    cat_pid:0,
                    cat_level:0
                }
            }
        },
        components:{
            BreadCrumb
        },
        mounted(){
            this.getGoodsData();
        },
        methods:{
            // 获取所有商品分类数据
            async getGoodsData(){
                const result = await Get_GoodsData(this.info);//发送请求
                console.log(result);
                if(result.meta.status != 200){//如果状态码不为200
                    return this.$message({//弹出错误提示框
                        message:'请求失败',
                        type:'error'
                    })
                }
                this.goodsList = result.data.result;//否则 赋值初始值
                this.total = result.data.total;//将总条数存储起来
            },
            // 监听每页分页有多少数据
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.info.pagesize = val;//更新pagesize
                this.getGoodsData();//重新发送请求 更新数据
            },
            // 监听当前分页是第几页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.info.pagenum = val;//更新pagenum
                this.getGoodsData();//重新发送请求 更新数据
            },
            // 获取商品信息
            async GetOneInfo(info){//info为当前行数据
                this.UpdateDialogVisible = true;//点击时显示当前对话框
                console.log(info.cat_id);
                this.id = info.cat_id;//存储id
                this.name = info.cat_name;//存储name
                const result = await Get_OneGoodsData(info.cat_id);
                if(result.meta.status != 200){//如果状态码不为200
                    return this.$message.error('获取失败');//返回错误提示框
                }
                this.UpdateForm = result.data;//否则赋初始值
            },
            // 修改商品信息
            async UpdateInfo(){
                const result = await Update_OneGoodsData({//发送请求
                    method:'put',//请求方式为put
                    url:`categories/${this.id}`,//路径携带id
                    data:{//请求参数
                        id:this.UpdateForm.cat_id,
                        cat_name:this.UpdateForm.cat_name
                    }
                })
                if(result.meta.status != 200){//如果状态码不为200
                    return this.$message({//弹出错误提示框
                        message:'修改失败',
                        type:'error'
                    })
                }
                this.UpdateDialogVisible = false;
                this.getGoodsData();
                this.$message.success('修改成功')
            },
            // 删除商品信息
            async DeleteInfo(info){//info 为当前行数据
                const confirmResult = await this.$confirm('此操作将永久删除该用户信息, 是否继续?', '提示', {//点击时弹出确认框
                    confirmButtonText: '确定',//确定框按钮文字
                    cancelButtonText: '取消',//取消框按钮文字
                    type: 'warning'//类型为警告
                }).catch(err=>err);
                if(confirmResult == 'confirm'){//如果confirmResult的值为confirm
                    const result = await Delete_GoodsData(info.cat_id);//发送删除请求
                    if(result.meta.status != 200){//如果状态码不为200
                        return this.$message.error('删除失败')//弹出错误提示框
                    }
                    this.$message.success('删除成功');//否则 弹出成功提示框
                    this.getGoodsData();//重新获取所有数据 更新页面
                }

            },
            // 添加分类
            async AddCateShow(){
                const result = await Get_GoodsData({type:2});//获取第二级数据
                console.log(result);
                if(result.meta.status != 200){//如果状态码不为200
                    return this.$message.error('获取数据失败')//弹出错误提示框
                }
                this.parentCateOptions = result.data;//赋初始值
                this.AddForm.cat_name = '';
                this.SelectedKeys = [];
                this.AddDialogVisible = true;//当前对话框显示
            },
            // 添加分类商品
            async AddCateInfo(){
                const result = await Add_GoodsData(this.AddForm);
                console.log(result);
                if(result.meta.status != 201){//如果状态码不为201
                    return this.$message.error('添加失败')//弹出错误提示框
                }
                this.AddDialogVisible = false;//关闭当前对话框
                this.$message.success('添加成功');//弹出成功提示框
                this.getGoodsData();//重新获取数据 更新
            },
            // 当级联选择器发生变化时
            CateChange(){
                console.log(this.SelectedKeys);//为选中元素的cat_id
                if(this.SelectedKeys.length > 0){//如果SelectedKeys的长度大于0 就代表是选了东西
                    this.AddForm.cat_pid = this.SelectedKeys[this.SelectedKeys.length - 1];//this.AddForm.cat_pid就等于添加元素父级的id为长度-1
                }else{//如果不大于0
                    this.AddForm.cat_pid = 0;//设置为初始值
                    this.AddForm.cat_level = 0;//设置为初始值
                }
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>